﻿@page "/chart/multi-series-chart"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the annual growth of GDP in France in the combination of line and stacked column series. The tooltip shows information about the data point.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the different type of charts. You can render any combination of the series in the chart except the bar.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the multiple series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-series/#multiple-series'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Annual Growth of GDP in France" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis LabelIntersectAction="LabelIntersectAction.Rotate45" Title="Years" Interval="1" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Growth (in Billion)" Minimum="-3" Maximum="3" Interval="1" LabelFormat="{value}B">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Private Consumption" XName="Period" YName="PVT_Consumption" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Government Consumption" XName="Period" YName="GOVT_Consumption" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Investment" XName="Period" YName="Investment" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Net Foreign Trade" XName="Period" YName="Trade" Type="ChartSeriesType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="GDP" XName="Period" YName="GDP" Width="2" Opacity="0.6" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Height="10" Width="10"></ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<CombinationSeriesData> ChartPoints { get; set; } = new List<CombinationSeriesData>
    {
        new CombinationSeriesData { Period = "2005", PVT_Consumption = 1.2, GOVT_Consumption = 0.5, Investment = 0.7, Trade = -0.8, GDP = 1.5 },
        new CombinationSeriesData { Period = "2006", PVT_Consumption = 1, GOVT_Consumption = 0.5, Investment = 1.4, Trade = 0, GDP = 2.3 },
        new CombinationSeriesData { Period = "2007", PVT_Consumption = 1, GOVT_Consumption = 0.5, Investment = 1.5, Trade = -1, GDP = 2 },
        new CombinationSeriesData { Period = "2008", PVT_Consumption = 0.25, GOVT_Consumption = 0.35, Investment = 0.35, Trade = -.35, GDP = 0.1 },
        new CombinationSeriesData { Period = "2009", PVT_Consumption = 0.1, GOVT_Consumption = 0.9, Investment = -2.7, Trade = -0.3, GDP = -2.7 },
        new CombinationSeriesData { Period = "2010", PVT_Consumption = 1, GOVT_Consumption = 0.5, Investment = 0.5, Trade = -0.5, GDP = 1.8 },
        new CombinationSeriesData { Period = "2011", PVT_Consumption = 0.1, GOVT_Consumption = 0.25, Investment = 0.25, Trade = 0, GDP = 2 },
        new CombinationSeriesData { Period = "2012", PVT_Consumption = -0.25, GOVT_Consumption = -0.5, Investment = -0.1, Trade = -0.4, GDP = 0.4 },
        new CombinationSeriesData { Period = "2013", PVT_Consumption = 0.25, GOVT_Consumption = 0.5, Investment = -0.3, Trade = 0, GDP = 0.9 },
        new CombinationSeriesData { Period = "2014", PVT_Consumption = 0.6, GOVT_Consumption = 0.6, Investment = -0.6, Trade = -0.6, GDP = 0.4 },
        new CombinationSeriesData { Period = "2015", PVT_Consumption = 0.9, GOVT_Consumption = 0.5, Investment = 0, Trade = -0.3, GDP = 1.3 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class CombinationSeriesData
    {
        public string Period { get; set; }
        public double PVT_Consumption { get; set; }
        public double GOVT_Consumption { get; set; }
        public double Investment { get; set; }
        public double Trade { get; set; }
        public double GDP { get; set; }
    }
}
